import React from 'react';
import MaterialItem from './MaterialItem';
import './index.less'
import { getId } from '../../utils';
const Material = () => {

  const materials = [
    {
      name: 'QueryFilter',
      preview: 'http://static.xyb2b.com/images/b57f0b835028f37358c673245b2204b4.png',

      item: {

        component: 'QueryFilter'

      }
    }, {
      name: 'QuickTabs',
      preview: 'http://static.xyb2b.com/images/b57f0b835028f37358c673245b2204b4.png',

      item: {

        component: 'QuickTabs',
        children: [{
          component: 'QuickTabsPanel',
        }]
      }
    }, {
      name: 'QickTable',
      preview: 'http://static.xyb2b.com/images/709f301f5cc1275adb22f2345e5b424f.png',
      item: {
        component: 'QuickTable'
      }
    }, {
      name: 'Toolbar',
      preview: 'http://static.xyb2b.com/images/b57f0b835028f37358c673245b2204b4.png',
      item: {

        component: 'Toolbar'
      }
    }, {
      name: 'QuickGrid',
      preview: 'http://static.xyb2b.com/images/b57f0b835028f37358c673245b2204b4.png',
      item: {

        component: 'QuickGrid',
        children: [
          {
            component: 'QuickGridCol'
          }
        ]
      }
    }, {
      name: 'QuickCollapse',
      preview: 'http://static.xyb2b.com/images/b57f0b835028f37358c673245b2204b4.png',
      item: {

        component: 'QuickCollapse',
        children: [
          {
            component: 'QuickCollapsePanel'
          }
        ]
      }
    },{
      name: 'QuickButton',
      preview: 'http://static.xyb2b.com/images/b57f0b835028f37358c673245b2204b4.png',
      item: {

        component: 'QuickButton',
       
      }
    }
  ]
  return (<div className='material-list'>
    {
      materials.map(item => {
        return <MaterialItem item={item} key={item.name} />
      })
    }

  </div>)
}
export default Material